<template>
  <div>
    <!-- 二级路由  占位符 -->
    <router-view />

    <!-- 底部选项卡 -->
    <mt-tabbar v-model="tabSelected" fixed>
      <mt-tab-item id="index">
        <img
          :src="
            require(`@/assets/main_${tabSelected == 'index' ? '1' : '0'}.png`)
          "
          slot="icon"
        />
        首页
      </mt-tab-item>

      <mt-tab-item id="me">
        <img
          :src="require(`@/assets/me_${tabSelected == 'me' ? '1' : '0'}.png`)"
          slot="icon"
        />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabSelected: this.$route.path.split("/").pop(),
    }
  },
  activated() {
    this.tabSelected = this.$route.path.split("/").pop()
  },
   watch: {
    tabSelected(newValue, oldValue) {
      console.log(newValue);
      console.log(this.$route.path.split("/").pop())
      if(newValue == this.$route.path.split("/").pop()){
        return;
      }
      // this.$router.push(`/home/${newValue}`)
      if (newValue == "index") {
        this.$router.push("/home/index");
      } else if (newValue == "me") {
        this.$router.push("/home/me");
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
